<template>
	<!-- 时尚资讯 -->
	<div>
		<newHeader />
		<el-main>
			<div style="text-align: center;margin-top: 40px;">
				<span style="font-size: 25px;color: #000000;font-weight: 400;">时尚资讯</span>
				<br />
				<span style="font-size: 15px;color: #8e8e8f;font-weight: 100;">information</span>
			</div>

			<div style="width: 85%;margin-left: 10%;">
				<el-divider></el-divider>
			</div>

			<!--  资讯的标题栏  -->
			<div id="zixunTab" style="height: 60px; text-align: center;margin-top: 30px;">
				<span :class="(tabsSure[0]?'titleCommon titleAfter':'titleCommon titleBefore')" @click="onTabSelected(0)">全部资讯</span>
				<span :class="(tabsSure[1]?'titleCommon titleAfter':'titleCommon titleBefore')" @click="onTabSelected(1)">品牌</span>
				<span :class="(tabsSure[2]?'titleCommon titleAfter':'titleCommon titleBefore' )" @click="onTabSelected(2)">价值</span>
				<span :class="(tabsSure[3]?'titleCommon titleAfter':'titleCommon titleBefore')" @click="onTabSelected(3)">价值传播</span>

			</div>

			<!--  新闻列表的内容列表  -->
			<div id="newsContentList">
				<div v-for="item in msgList" style="padding-top: 20px;padding-bottom: 40px;">
					<el-image class="contentImg" :src="item.url" fit="cover"></el-image>
					<div class="contentBox">
						<span class="contentTitle">{{item.title}}</span>
						<div class="contentDivide"></div>
						<span class="contentData">{{item.date}}</span>
						<p class="contentDesc">{{item.desc}}</p>
					</div>
				</div>
			</div>

		</el-main>

		<newFooter />
	</div>
</template>

<script>
	// 导入其他模板示例
	import newHeader from '../home/newheader.vue'
	import newFooter from '../home/newFooter.vue'
	export default {
		name: 'designers',
		components: {
			newHeader,
			newFooter
		},
		data() {
			return {
				tabsSure: [true, false, false, false],
				msgList: [{
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, {
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, {
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, ],
				msgList2: [{
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, {
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, {
					url: 'https://ccdn.goodq.top/caches/6cb70c11d7924995c4268c57fc3cb083/aHR0cHM6Ly81OGJmOTlmMWNlMjY5LnQ3NC5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMTAvNzg1NGI4OWZkNTM4MjliMGYxOTE3YzNjMjY4OTNiZTgtMjgweDI4MC05MC53ZWJw.webp',
					title: '法国时装文化的最高精神 解读Dior传奇',
					date: '发布日期：2017-07-13',
					desc: '从一九四七年巴黎蒙田大街30号（30 Avenue Montaigne）New Look的展出开始，Dior就成为高级女装的代名词, 继承了法国高级女装的传统，始终保持华丽的设计路线，做工精细，迎合上流社会成熟女性的审美品味，象征着法国时装文化的最高精神。',
				}, ],
			}
		},
		methods: {
			getNewNewsData() {},
			onTabSelected(index) {

				const loading = this.$loading({
					lock: true,
					target:'#newsContentList',
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.8)'
				});
				var msgl = this.msgList2;
				setTimeout(() => {
					this.msgList.splice(0, this.msgList.length);
					var tabList = this.tabsSure;
					for (var i = 0; i < tabList.length; i++) {
						tabList[i] = (i == index)
					}
					//由于 javascript的限制，导致数组更新无法更新视图
					this.tabsSure.splice(0, 0)
					console.log("tabss--->" + this.tabsSure)
					for (var i = 0; i < msgl.length; i++) {
						this.msgList.push(msgl[i])
					}
					loading.close();
				}, 1000);
			},
		},
	}
</script>

<style scoped="scoped">
	#zixunTab .titleCommon {
		font-size: 13px;
		padding: 6px 20px 6px 20px;
		cursor: pointer;
		margin-right: 5px;
	}

	#zixunTab .titleBefore {
		background-color: #ffffff;
		color: #000000;
	}

	#zixunTab .titleBefore:hover {
		background-color: #000000;
		color: #ffffff;
	}

	#zixunTab .titleAfter {
		background-color: #000000;
		color: #ffffff;
	}

	#newsContentList .contentImg {
		width: 300px;
		height: 150px;
		display: inline-block;
		margin-left: 10%;
	}

	#newsContentList .contentBox {
		display: inline-block;
		margin-left: 60px;
		width: 60%;
		vertical-align: top;
	}

	#newsContentList .contentTitle {
		color: #000000;
		font-size: 18px;
		font-weight: 200;
	}

	#newsContentList .contentDivide {
		height: 1px;
		background-color: #83A598;
		margin-top: 10px;
		margin-bottom: 6px;
	}

	#newsContentList .contentData {
		color: #8e8e8f;
		font-size: 13px;
		font-weight: 100;
	}

	#newsContentList .contentDesc {
		color: #9e9e9f;
		font-size: 13px;
		font-weight: 100;
		line-height: 180%;
		margin-top: 10px;
	}
</style>
